import React, { useState } from 'react';
import { CameraIcon, MicrophoneIcon, PhoneIcon, PaperAirplaneIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { useTranslatorStore } from '@/store/translator';

interface InputBarProps {
  value: string;
  onChange: (value: string) => void;
  sourceLanguage: string;
  targetLanguage: string;
  isSpeakerOn: boolean;
}

const InputBar: React.FC<InputBarProps> = ({ 
  value, 
  onChange,
  sourceLanguage,
  targetLanguage,
  isSpeakerOn,
}) => {
  const translate = useTranslatorStore(state => state.translate);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (value.trim()) {
      await translate(value, sourceLanguage, targetLanguage, isSpeakerOn);
      onChange(''); // Clear input after successful translation
    }
  };

  return (
    <form onSubmit={handleSubmit} className="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-sm border-t border-gray-100">
      <div className="max-w-lg mx-auto px-3 py-2.5">
        <div className="flex items-center gap-2">
          <button 
            type="button" 
            className="p-2 text-gray-500 hover:text-gray-700 transition-colors rounded-full hover:bg-gray-100"
          >
            <CameraIcon className="w-5 h-5" />
          </button>
          
          <div className="flex-1 flex items-center bg-gray-50 rounded-full px-4 py-2 border border-gray-200 focus-within:border-gray-400 transition-colors">
            <input
              type="text"
              value={value}
              onChange={(e) => onChange(e.target.value)}
              placeholder="输入要翻译的文字"
              className="flex-1 bg-transparent outline-none text-gray-800 placeholder-gray-500 text-sm min-w-0"
            />
            <button 
              type="button" 
              className="ml-2 p-1.5 text-gray-500 hover:text-gray-700 transition-colors rounded-full hover:bg-gray-100"
            >
              <MicrophoneIcon className="w-4 h-4" />
            </button>
            <button 
              type="submit"
              className="ml-2 p-1.5 text-blue-600 hover:text-blue-700 transition-colors rounded-full hover:bg-blue-50"
            >
              <PaperAirplaneIcon className="w-4 h-4" />
            </button>
          </div>
          
          <Link href="/service/phone">
            <button 
              type="button" 
              className="p-2 text-gray-500 hover:text-gray-700 transition-colors rounded-full hover:bg-gray-100"
            >
              <PhoneIcon className="w-5 h-5" />
            </button>
          </Link>
        </div>
      </div>
    </form>
  );
};

export default InputBar;